$(function(){
  download();
  function download(){
    $.ajax({
    type:"get",
    url:"./assets/data/data.json",
    success:function(arr){
        var datadArr=arr[0];
        var node1=$(`<div class = 'home-banner-box'>
        <a href="list.html">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1a2f39c9fe0804ace1d3707574c7c86f.jpg?thumb=1&w=1226&h=120&f=webp&q=90" alt=""/>
        </a>
    </div>
    <div class = "home-brick-box home-brick-row-2-box xm-plain-box">
        <div class = 'box-hd'>
            <h2 class = 'title'>${datadArr.title}</h2>
            <div class = "more">
                <a href="#" class = 'more-link'>
                    查看全部
                    <i class = 'iconfont iconfont-arrow-right-big'></i>
                </a>
            </div>
        </div>
        <div class = 'hox-bd clearfix'>
            <div class = 'row'>
                <div class = 'span4'>
                    <ul class = 'brick-promo-list clearfix'>
                        <li class = 'brick-item brick-item-l'>
                            <a href="descxxx.html">
                                <img src="${datadArr.img}" alt=""/>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class = 'span16'>
                    <ul class = 'brick-list clearfix'>
                    
                    </ul>
                </div>
            </div>
        </div>
    </div>`);
    node1.appendTo(".page-main .container");
    var listArr=datadArr.childs;
    for(var i=0;i<listArr.length;i++){
        $(`<li class = 'brick-item brick-item-m brick-item-m-2'>
        <a href="descxxx.html">
            <div class = 'figure figure-img'>
                <img width="160" height="160" src="${listArr[i].img}" alt=""/>
            </div>
            <h3 class = 'title'>
            ${listArr[i].title}
            </h3>
            <p class = 'desc'>${listArr[i].desc}</p>
            <p class = 'price'>
                <span class = 'num'>${listArr[i].price}</span>
                元
                <span>起</span>
                ${listArr[i].del==0?"":"<del>"+listArr[i].del+"元</del>"}
            </p>
        </a>
    </li>`).appendTo(".span16 .brick-list");
    }
    for(var j=1;j<arr.length;j++){
        var node2=$(`<div class = 'home-banner-box'>
        <a href="list.html">
            <img src="${arr[j].topImg}" alt=""/>
        </a>
    </div>
    <div class = 'home-brick-box home-brick-row-2-box xm-plain-box'>
        <div class = 'box-hd clearfix'>
            <h2 class = 'title'>${arr[j].title}</h2>
            <div class = 'more'>
                <ul class = 'tab-list'>
                    <li class = 'tab-active'>
                        热门
                    </li>
                    <li>
                    ${arr[j].subTitle}
                    </li>
                </ul>
            </div>
        </div>
        <div class = 'box-bd'>
            <div class = 'row'>
                <div class = 'span4'>
                    <ul class = 'brick-promo-list clearfix'>
                        <li class = 'brick-item  brick-item-m'>
                            <a href="descxxx.html">
                                <img src="${arr[j].leftChilds[0]}" alt=""/>
                            </a>
                        </li>
                        <li class = 'brick-item  brick-item-m'>
                            <a href="descxxx.html">
                                <img src="${arr[j].leftChilds[1]}" alt=""/>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class = 'span16'>
                    <ul class = "brick-list clearfix">
                    </ul>
                    <ul class = "brick-list clearfix hide">
                    </ul>
                </div>
            </div>
        </div>
    </div>`);
    node2.appendTo(".page-main .container");
    var hotChildArr=arr[j].hotChilds;
    for(var k=0;k<hotChildArr.length;k++){
        $(`<div>
        <li class = 'brick-item ${k==7?"brick-item-s":"brick-item-m brick-item-m-2"}'>
            <a href="descxxx.html">
                <div class = 'figure figure-img'>
                    <img width="160" height="160" src="${hotChildArr[k].img}" alt=""/>
                </div>
                <h3 class = 'title'>${hotChildArr[k].title}</h3>
                <p class = 'desc'>${hotChildArr[k].desc}</p>
                <p class = 'price'>
                    <span class = 'num'>${hotChildArr[k].price}</span>元
                    <del>
                        <span class = 'num'>${hotChildArr[k].del}</span>元
                    </del>
                </p>
            </a>
        </li>
    </div>`).appendTo(node2.find(".span16 ul").eq(0));
    };
    $(`<li class = 'brick-item brick-item-s'>
    <a href="#">
        <div class = 'figure figure-more'>
            <i class = 'iconfont iconfont-circle-arrow-right'></i>
        </div>
        <div class = 'more'>
            浏览更多
            <small>${arr[j].subTitle}</small>
        </div>
    </a>
</li>`).appendTo(node2.find(".span16 ul").eq(0));
    var achildsArr=arr[j].childs;
    for(var l=0;l<achildsArr.length;l++){
        $(`<div>
        <li class = 'brick-item ${l==7?"brick-item-s":"brick-item-m brick-item-m-2"}'>
            <a href="descxxx.html">
                <div class = 'figure figure-img'>
                    <img width="160" height="160" src="${achildsArr[l].img}" alt=""/>
                </div>
                <h3 class = 'title'>${achildsArr[l].title}</h3>
                <p class = 'desc'>${achildsArr[l].desc}</p>
                <p class = 'price'>
                    <span class = 'num'>${achildsArr[l].price}</span>元
                    <del>
                        <span class = 'num'>${achildsArr[l].del}</span>元
                    </del>
                </p>
            </a>
        </li>
    </div>`).appendTo(node2.find(".span16 ul").eq(1));
    };
    $(`<li class = 'brick-item brick-item-s'>
    <a href="goodsDesc.html">
        <div class = 'figure figure-more'>
            <i class = 'iconfont iconfont-circle-arrow-right'></i>
        </div>
        <div class = 'more'>
            浏览更多
            <small>${arr[j].subTitle}</small>
        </div>
    </a>
</li>`).appendTo(node2.find(".span16 ul").eq(1));
    }
    },
    error:function(msg){
        console.log(msg);
    }
    });
}
TabMenu();
function TabMenu(){
  $(".page-main .container").on("mouseenter",".more .tab-list li",function(){
      $(this).addClass("tab-active").siblings("li").removeClass("tab-active");
      $(this).closest(".home-brick-box").find(".box-bd .row .span16 ul").eq($(this).index()).removeClass("hide").siblings("ul").addClass("hide");
  })
}
})